<template>
  <div class="colorbar-wrapper">
    <div id="canvasContainer">
      <canvas  id="canvas"   :width="this.width" :height="this.height" v-if="showCanvas" >
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SColorbar',
  props: {
    colors: {
      type: Array
    },
    colorLevel: {  //13或者30
      type: Number,
      default: 13
    },
    title: {
      type: String,
      default: '标题'
    },
    colorbarText: {
      type: Object,
      default: function(){
        return { topText: '高', centerText: '中', bottomText: '低' }
      }
    },
    range: {
      type: Object,
      default: function () {
        //{ min: 0, max: 1 }
        return {};
      }
    }
  },
  watch: {
    colors: {
      handler: function (val) {
        if (this.isEmpty(val)) {
          if (this.colorLevel == 13) {
            this.colorLists = this.colors2;
          } else {
            this.colorLists = this.colors1;
          }
        } else {
          this.colorLists = val;
        }
      },
      immediate: true
    },
    colorbarText: {
      handler: function (val) {
        this.showCanvas = false;
        this.colorbarLabel = val;
        this.redraw();
      },
      immediate: true
    },
    colorLevel: {
      handler: function (val, oldValue) {
        if (typeof val == 'number') {
          if (this.colorLists.length == val) {
            return;
          }
          this.showCanvas = false;
          if (val == 13) {
            this.colorLists = this.colors2;
            //             this.height = 20 * val;
          } else if (val == 30) {
            this.colorLists = this.colors1;
          } else {
            //             this.height = 15 * val;
          }
          //           this.cbHeight = this.height - 60;

          this.redraw();
        }
      },
      immediate: true
    },
  },
  data() {
    return {
      showCanvas: true,
      canvas: null,
      context: null,
      colors1: ['#032f7c', '#074892', '#165980', '#13668e', '#137e94', '#189796',
        '#0ba28a', '#31a182', '#16ad71', '#10c353', '#01cf32', '#06d914',
        '#12d60a', '#3de10b', '#54ec00', '#76ed00', '#c2f501', '#eefd08',
        '#f5f602', '#fdeb00', '#f4cd00', '#fcbd0c', '#fab200', '#f59c13',
        '#e79313', '#f48012', '#e26b1c', '#dd5f1f', '#cf5831', '#d74e36'],
      colors2: [
        '#0B2C7B', '#116087', '#1A9199', '#1A9199', '#12C33F', '#11DF01',
        '#77F204', '#ECFB02', '#FAD50B', '#E8B712', '#EA8B1D', '#CD6D33',
        '#C1533A'],
      width:160,
      height: 400,
      cbWidth: 20,
      cbHeight: 340,
      splitNum: 5,
      colorLists: [],
      titleHeight: 30,
      colorbarLabel: { topText: '高', centerText: '中', bottomText: '低' },
    }
  },
  methods: {
    //绘制colorbar
    drawColorBar(context) {
      let gradientBar = context.createLinearGradient(this.cbWidth / 2, 0, this.cbWidth / 2, this.cbHeight);
      let len = this.colorLists.length;
      this.colorLists.forEach((d, i) => {
        if (i == 0) {
          gradientBar.addColorStop(0, d);
        } else {
          gradientBar.addColorStop(i / (len - 1), d);
        }
      })
      context.fillStyle = gradientBar;
      context.fillRect(this.cbWidth + 15, 15 + + this.titleHeight, this.cbWidth, this.cbHeight);
      // this.drawColorBarScale(context);
      this.drawColorBarLabel(context);
    },
    //绘制colorbar的上下的小三角
    drawColorBarScale(context) {
      context.beginPath();
      context.strokeStyle = this.colorLists[0];
      context.moveTo(this.cbWidth + 15, 15 + this.titleHeight);
      context.lineTo(this.cbWidth + 5, 15 + this.titleHeight);
      context.lineTo(this.cbWidth + 5, 5 + this.titleHeight);
      context.lineTo(this.cbWidth + 15, 15 + this.titleHeight);
      context.stroke();
      context.closePath();
      context.fillStyle = this.colorLists[0];
      context.fill();

      context.beginPath();
      context.strokeStyle = this.colorLists[this.colorLists.length - 1];
      context.moveTo(this.cbWidth + 15, this.cbHeight + 15 + this.titleHeight);
      context.lineTo(this.cbWidth + 5, this.cbHeight + 15 + this.titleHeight);
      context.lineTo(this.cbWidth + 5, this.cbHeight + 25 + this.titleHeight);
      context.lineTo(this.cbWidth + 15, this.cbHeight + 15 + this.titleHeight);
      context.stroke();
      context.closePath();
      context.fillStyle = this.colorLists[this.colorLists.length - 1];
      context.fill();
      context.save();
    },
    //绘制刻度轴文本
    drawColorBarLabel(context) {
      context.font = "14px bold Microsoft Yahi";
      context.fillStyle = '#000';
      context.fillText(this.title, 20, 15);
      if (Object.keys(this.range).length == 0) {
        context.fillText(this.colorbarLabel.topText, this.width - this.cbWidth - 20, 15 + this.titleHeight);
        context.fillText(this.colorbarLabel.centerText, this.width - this.cbWidth - 20, (this.height + 14 + this.titleHeight) / 2);
        context.fillText(this.colorbarLabel.bottomText, this.width - this.cbWidth - 20, this.height - 5);
      } else {
        context.fillText(this.colorbarLabel.topText + ": >" + this.range.max, this.width - this.cbWidth - 80, 20 + this.titleHeight);
        context.fillText(this.colorbarLabel.centerText + ": " + + this.range.min + "~" + this.range.max, this.width - this.cbWidth - 80, (this.height + this.titleHeight) / 2);
        context.fillText(this.colorbarLabel.bottomText + ": <" + this.range.min, this.width - this.cbWidth - 80, this.height - 10);
      }
    },
    getCanvasAndCxt() {
      this.canvas = document.getElementById('canvas');
      if (!this.canvas) return;
      this.context = this.canvas.getContext('2d');
      if (!this.context) return;
    },
    getCanvasSize() {
      if (!this.canvas) return;
      let style = document.defaultView.getComputed(this.canvas, null).style;
      return { width: style.width, height: style.height };
    },
    redraw() {
      this.context != null && this.context != undefined && this.clearCanvas();
      this.showCanvas = true;
      this.getCanvasAndCxt();
      if (!this.context) return;
      this.drawColorBar(this.context);
    },
    clearCanvas() {
      this.context.clearRect(0, 0, this.width, this.height);
    },
  },
  mounted() {
    this.getCanvasAndCxt();
    this.drawColorBar(this.context);
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/base_style";
.colorbar-wrapper {
  #canvas {
    // background: rgba(255, 255, 255, 0.3);
  }
}
</style>
